<template>
<view class="login-box">
  <view class="tabs">
    <uni-segmented-control :current="state.sectionConf.current" :values="state.sectionConf.items" :style-type="state.sectionConf.styleType"
                           :active-color="state.sectionConf.activeColor" @clickItem="onClickLoginTab" />
  </view>
  <!-- 登录表单 -->
  <view class="login-form uni-pa-10" v-if="state.sectionConf.current === 0">
    <uni-forms ref="loginFormRef" :modelValue="state.loginFormNoPhone">
      <uni-forms-item label="账号">
        <uni-easyinput v-model="state.loginFormNoPhone.account" placeholder="请输入登录账号"></uni-easyinput>
      </uni-forms-item>
      <uni-forms-item label="密码">
        <uni-easyinput v-model="state.loginFormNoPhone.passwd" type="password" placeholder="请输入登录密码"></uni-easyinput>
      </uni-forms-item>
    </uni-forms>
    <button class="btn-in-login" type="warn" size="mini" @tap="doLogin(1)">登录</button>
    <view class="bottom-options uni-mt-5">
      <view class="register-txt">
        <navigator url="/pagesLogin/settings/register">还没有账号？去注册</navigator>
      </view>
      <view class="forget-pwd">
        <navigator url="/pagesLogin/settings/forgetpwd">忘记密码？去重置</navigator>
      </view>
    </view>
  </view>
  <view class="login-form-nophone uni-pa-10" v-if="state.sectionConf.current === 1">
    <uni-forms ref="loginFormRef" :modelValue="state.loginFormPhone">
      <uni-forms-item label="手机号">
        <uni-easyinput v-model="state.loginFormPhone.phone" placeholder="请输入手机号"></uni-easyinput>
      </uni-forms-item>
      <CaptchaComp :phone="state.loginFormPhone" @get-captcha="receiveCaptcha" />
    </uni-forms>
    <button class="btn-in-login" type="warn" size="mini" @tap="doLogin(2)">登录</button>
    <view class="bottom-options uni-mt-5">
      <view class="register-txt">
        <navigator url="/pagesLogin/settings/register">还没有账号？去注册</navigator>
      </view>
      <view class="forget-pwd">
        <navigator url="/pagesLogin/settings/forgetpwd">忘记密码？去重置</navigator>
      </view>
    </view>
  </view>
</view>
</template>
<script setup lang="ts">
import {ref} from "vue";
import CaptchaComp from './components/captcha.vue'
import {useUserStore} from "@/stores/user";
import type {LoginWithAccountType} from "@/types/user";

const userStore = useUserStore()
const state = ref({
  loginFormNoPhone: {
    account: "weridwoman2",
    passwd: "666666"
  } as LoginWithAccountType,
  loginFormPhone: {
    phone: "",
    code: ""
  },

  sectionConf: {
    current: 0,
    items: ["账号登录", "手机号登录"],
    styleType: "text",
    activeColor: '#e43d33',
  },
  loginWithPhoneConf: {
    captchaTxt: "获取验证码",
    reqTime: 0,
    intervalId: 0,
    disableReqCaptcha: false
  }
})

const onClickLoginTab = (e: any) => {
  console.log("tab section click, ", e)
  state.value.sectionConf.current = e.currentIndex
}

const receiveCaptcha = (captcha: string) => {
  console.log("receive captcha component data: ", captcha)
  state.value.loginFormPhone.code = captcha
}

const doLogin = (type: number) => {
  console.log("@do login, form: ", state.value)
  if (type === 1) {
    userStore.loginWithAccount(state.value.loginFormNoPhone)
        .then(() => {
      console.log("login use account success...")
      // 跳转至我的页面
      uni.switchTab({
        url: "/pages/my/my"
      })
    }).catch(()=>{})
    return
  }

  if (type ===2) {
    userStore.loginWithPhone(state.value.loginFormPhone).then(() => {
      // 跳转至我的页面
      uni.switchTab({
        url: "/pages/my/my"
      })
    }).catch(() => {
    })
    return;
  }
    uni.showToast({
      title: '未知的登录方式, 请稍后再试',
      icon: "none"
    })
}
</script>
<style scoped lang="scss">
.login-form-nophone {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.btn-in-login {
  width: 100%;
}
.bottom-options {
  display: flex;
  justify-content: space-between;
}
.register-txt, .forget-pwd {
  color: #909399;
  font-size: 12px;
}
.disable-item {
  background-color: #8f939c;
  color: #fff;
}
</style>